<template>
  <div>
    <el-space direction="vertical" :size="20">
      <h1>帖子管理</h1>
      <el-table :data="posts" style="width: 100%">
        <el-table-column label="标题">
          <template #default="scope">
            <a :href="$http.server_host + '/post/detail/' + scope.row.id" target="_blank">{{
              scope.row.title
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发布时间" width="180" />
        <el-table-column prop="board.name" label="所属板块" />
        <el-table-column prop="author.username" label="作者" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" circle size="mini" @click="onDeletePostClick(scope.$index)">
              <el-icon>
                <delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;">
        <el-pagination background layout="prev, pager, next" :total="total_count" :current-page="page"
          @current-change="onPageChanged">
        </el-pagination>
      </div>
    </el-space>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="confirmDialogVisible" title="提示" width="30%">
      <span>如果删除帖子，该帖子下所有的评论也会被删除，您确定要删除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onConfirmDeletePostClick">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Delete } from "@element-plus/icons";
import { ElMessage } from 'element-plus';
export default {
  name: "PostPage",
  data() {
    return {
      del_index: 0,
      confirmDialogVisible: false,
      posts: [],
      total_count: 0,
      page: 1
    };
  },
  mounted() {
    this.GetPostList(1)
  },
  methods: {
    //获取帖子列表
    GetPostList(page) {
      this.$http.getpostlist(page).then(res => {
        if (res['code'] == 200) {
          let data = res['data']
          this.posts = data['post_list']
          this.page = data['page']
          this.total_count = data['total_count']
        }
      })
    },
    //点击删除帖子
    onDeletePostClick(index) {
      this.confirmDialogVisible = true;
      this.del_index = index
    },
    //确认删除帖子
    onConfirmDeletePostClick() {
      let post = this.posts[this.del_index]
      this.$http.deletepost(post.id).then(res => {
        if (res['code'] == 200) {
          this.posts.splice(this.del_index, 1)
          ElMessage.success("帖子删除成功")
          this.confirmDialogVisible = false
        } else {
          ElMessage.info(res['message'])
        }
      })
    },
    onPageChanged(current_page) {
        this.GetPostList(current_page)
    }
  },
  //注册组件
  components: {
    Delete
  }
};
</script>

<style scoped>
.el-space {
  display: block;
}
</style>
